<template>
  <div>
    <div id="chart" style="width: 100%; height: 100vh"></div>
    <div></div>
    <!-- 通过一个div包裹按钮，控制按钮的位置 -->
    <div id="button-container">
      <button id="toggleChartButton">切换图表</button>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      ROOT_PATH: "http://echarts.apache.org/examples",
      myChart: null,
      mapOption: {},
      barOption: {},
      currentOption: null,
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 销毁时移除事件监听器
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(document.getElementById("chart"));
      this.myChart.showLoading();

      fetch("/json/world.json")
        .then((response) => response.json())
        .then((worldJson) => {
          this.myChart.hideLoading();
          echarts.registerMap("world", worldJson);

          const data = [
            { name: "China", value: 90000, nikename: "中国" },
            { name: "India", value: 10000, nikename: "印度" },
            { name: "United States", value: 40000, nikename: "美国" },
            { name: "Russia", value: 60002, nikename: "俄罗斯" },
            { name: "Japan", value: 4002, nikename: "日本" },
            { name: "Vietnam", value: 532, nikename: "越南" },
            { name: "United Kingdom", value: 532, nikename: "英国" },
            { name: "Italy", value: 532, nikename: "意大利" },
            { name: "Myanmar", value: 23454, nikename: "缅甸" },
            { name: "South Korea", value: 532, nikename: "韩国" },
          ];

          data.sort((a, b) => a.value - b.value);

          // 地图配置
          this.mapOption = {
            visualMap: {
              left: "right",
              min: 100,
              max: 100000,
              inRange: {
                color: [
                  // "#b8bdbd",
                  // "#4575b4",
                  // "#74add1",
                  "#abd9e9",  
                  "#e0f3f8",
                  "#ffffbf",
                  "#fee090",
                  "#fdae61",
                  "#f46d43",
                  "#d73027",
                  "#a50026",
                ],
                // color: [  "#e0f3f8","#b8bdbd","#4575b4","#74add1","#abd9e9" ],
              },
              text: ["High", "Low"],
              calculable: true,
            },
            series: [
              {
                type: "map",
                roam: true,
                map: "world",
                data: data,
                label: {
                  formatter: (params) => {
                    if (params.value > 0) {
                      return `{name|${params.data.nikename}}\n{value|${params.value}}`;
                    }
                    return "";
                  },
                  show: true,
                  fontSize: 12,
                  align: "center",
                  verticalAlign: "middle",
                  rich: {
                    name: {
                      fontSize: 16,
                      fontWeight: "bold",
                      color: "#333",
                    },
                    value: {
                      fontSize: 14,
                      fontWeight: "bold",
                      color: "#333",
                    },
                  },
                },
              },
            ],
          };

          // 条形图配置
          this.barOption = {
            xAxis: {
              type: "value",
            },
            yAxis: {
              type: "category",
              axisLabel: {
                rotate: 30,
              },
              data: data.map((item) => item.nikename),
            },
            series: {
              type: "bar",
              data: data.map((item) => item.value),
              label: {
                position: "right",
                show: true,
              },
            },
          };

          // 初始图表类型为地图
          this.currentOption = this.mapOption;
          this.myChart.setOption(this.mapOption);
        });

      // 切换图表按钮点击事件
      document
        .getElementById("toggleChartButton")
        .addEventListener("click", () => {
          this.currentOption =
            this.currentOption === this.mapOption
              ? this.barOption
              : this.mapOption;
          this.myChart.setOption(this.currentOption, true);
        });
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
  },
};
</script>

<style scoped>
/* 图表的样式 */
#chart {
  width: 100%;
  height: 100vh;
}

/* 按钮容器的位置和样式 */
#button-container {
  position: absolute;
  top: 2vh;
  left: 3%;
  z-index: 1000;
}

/* 按钮的样式 */
#toggleChartButton {
  background-color: white;
  color: rgb(7, 7, 7);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease;
}

/* 鼠标悬浮时的效果 */
#toggleChartButton:hover {
  background-color: #f0f0f0;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
}
</style>
